<template>
  <div class="app-container">
    <div class="simulation-container">
      <el-card
        class="simulation-card"
        v-for="simulationItem in simulationList"
        :key="simulationItem.id"
      >
        <div slot="header">
          <span>{{ simulationItem.name }}</span>
          <el-button
            style="float: right; padding: 3px 0;"
            type="text"
            @click="handleAnswer(simulationItem)"
            >开始答题</el-button
          >
        </div>
        <div class="text">
          <p> 学科:{{ simulationItem.subjectName }}</p>
          <p> 分数:{{ simulationItem.score }}</p>
          <p> 考试时长:{{ simulationItem.suggestTime }}分钟</p>
          <!-- <p> 考试时长:{{ simulationItem.suggestTime }}</p>
          <p> 开始时间:{{ parseTime(simulationItem.limitStartTime) }}</p>
          <p> 结束时间:{{ parseTime(simulationItem.limitEndTime) }}</p> -->
        </div>
      </el-card>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParam.pageNumber"
      :limit.sync="queryParam.pageSize"
      @pagination="_getSimulationList"
    />
  </div>
</template>

<script>
  import { getSimulationList } from '@/api/TeachingCenter/simulationManage'
  import Pagination from '@/components/Pagination'
  import { parseTime } from '@/utils/index'
  export default {
    components: { Pagination },
    data() {
      return {
        simulationList: [],
        multipleSelection: [],
        queryParam: {
          pageNumber: 1,
          pageSize: 10,
          filters: [
            {
              value: '',
              paramName: 'create_time',
              paramOperator: 'EQ'
            },
            {
              value: '',
              paramName: 'status',
              paramOperator: 'EQ'
            }
          ]
        },
        total: 0
      }
    },
    created() {
      this._getSimulationList()
    },
    methods: {
      async _getSimulationList() {
        const { filters, ...params } = this.queryParam
        params.filters = filters.filter((item) => {
          return item.value !== ''
        })
        const { data } = await getSimulationList(params)
        this.total = data.total
        this.simulationList = data.records
        console.log(data)
      },
      handleAnswer({id}) {
        window.open('/#/simulation-paper?id='+id)
      },
      parseTime
    }
  }
</script>

<style lang="scss" scoped>
  .simulation-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .simulation-card {
      width: 400px;
      margin-right: 10px;
      margin-bottom: 10px;
      /deep/ .el-card__body {
        padding: 10px;
      }
      .text {
        font-size: 14px;
        color: #9b9b9b;
      }
    }
  }
</style>
